<template>
    <div id="per">
        <PageTitle>个人信息</PageTitle>
        <div class="pages-top pages-scroll">
            <div id="personal">
                <div class="flex-item"><span>头像</span><img src="../../static/img/人.png"></div>
                <div class="flex-item"><span>账户</span><span>{{userInfo.tel}}</span></div>
                <div class="flex-item"><span>等级</span><span>{{userInfo.class}}-{{userInfo.vip}}</span></div>
            </div>
        </div>
        <button @click="exitClick">退出登录</button>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";

export default {
    components:{PageTitle},
    data(){
        return {
            userInfo:{}
        }
    },
    // 判断登录没登录
    mounted(){
        if(!sessionStorage.userInfo){
            return location.hash = "/login";
        }else{
          var userInfo =  JSON.parse(sessionStorage.userInfo);
          this.userInfo = {
              tel:userInfo.tel,
              class:userInfo.class,
              vip:userInfo.vip
          }
        };

    },
    methods:{
        exitClick(){
            this.$store.dispatch("requestExit");
        }
    }
}
</script>
<style scoped>
    #per{
        background-color: #F4F4F4;
        z-index: 200;
    }
    #personal{
        padding: 0 2.8vw;
        background-color: white;
        font-size: 3.92vw;
    }
    .flex-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5.6vw;
        border-bottom: #999999 solid 1px;
    }
    .flex-item:nth-last-of-type(1){
        border-bottom:none;
    }
    img{
        width: 14vw;
    }
    button{
        position: relative;
        bottom: 8.4vw;
        left: 0;
        width: 100%;
        height: 12vw;
        background-color: white;
        border: none;
    }
</style>